<template>
  <div class="container">
    <div class="header">
      <el-button type="primary" @click="handleBack" size="small" style="margin-bottom: 20px;">
        <el-icon><ArrowLeft /></el-icon>
        返回
      </el-button>
      <h2>新增生产问题</h2>
    </div>
    
    <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="120px" class="form-container">
      <el-form-item label="业务系统" prop="business_system">
        <el-input v-model="formData.business_system" placeholder="请输入业务系统" />
      </el-form-item>
      
      <el-form-item label="问题描述" prop="issue_description">
        <WangEditor v-model="formData.issue_description" height="300px" />
      </el-form-item>
      
      <el-form-item label="问题分类" prop="issue_category">
        <el-select v-model="formData.issue_category" placeholder="请选择问题分类">
          <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="原因分析">
        <el-input v-model="formData.reason" type="textarea" rows="3" placeholder="请输入原因分析" />
      </el-form-item>
      
      <el-form-item label="解决方案">
        <el-input v-model="formData.solution" type="textarea" rows="3" placeholder="请输入解决方案" />
      </el-form-item>
      
      <el-form-item label="影响程度" prop="impact_level">
        <el-select v-model="formData.impact_level" placeholder="请选择影响程度">
          <el-option v-for="item in impactOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="开发人员" prop="developer">
        <el-input v-model="formData.developer" placeholder="请输入开发人员" />
      </el-form-item>
      
      <el-form-item label="测试人员" prop="tester">
        <el-input v-model="formData.tester" placeholder="请输入测试人员" />
      </el-form-item>
      
      <el-form-item label="提交人" prop="reporter">
        <el-input v-model="formData.reporter" placeholder="请输入提交人" />
      </el-form-item>
      
      <el-form-item label="发生时间" prop="occurrence_time">
        <el-date-picker
          v-model="formData.occurrence_time"
          type="date"
          placeholder="选择日期"
          style="width: 100%"
        />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
        <el-button @click="handleBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { ArrowLeft } from '@element-plus/icons-vue';
import WangEditor from '@/components/WangEditor.vue';
import axios from '@/request/axios';
import dayjs from 'dayjs';

const router = useRouter();
const ruleFormRef = ref();

// 枚举选项
const categoryOptions = [
  { label: '功能性', value: '功能性' },
  { label: '性能', value: '性能' },
  { label: '安全', value: '安全' },
  { label: '界面', value: '界面' },
  { label: '其他', value: '其他' },
];

const impactOptions = [
  { label: '严重', value: '严重' },
  { label: '重大', value: '重大' },
  { label: '一般', value: '一般' },
  { label: '轻微', value: '轻微' },
];

// 表单数据
const formData = reactive({
  business_system: '',
  issue_description: '',
  issue_category: null,
  reason: null,
  solution: null,
  impact_level: '一般',
  developer: '',
  tester: '',
  reporter: '',
  occurrence_time: dayjs().format('YYYY-MM-DD'),
});

// 表单验证规则
const rules = {
  business_system: [
    { required: true, message: '请输入业务系统', trigger: 'blur' },
  ],
  issue_description: [
    { required: true, message: '请输入问题描述', trigger: 'blur' },
  ],
  impact_level: [
    { required: true, message: '请选择影响程度', trigger: 'change' },
  ],
  developer: [
    { required: true, message: '请输入开发人员', trigger: 'blur' },
  ],
  tester: [
    { required: true, message: '请输入测试人员', trigger: 'blur' },
  ],
  reporter: [
    { required: true, message: '请输入提交人', trigger: 'blur' },
  ],
  occurrence_time: [
    { required: true, message: '请选择发生时间', trigger: 'change' },
  ],
};

// 提交表单
const handleSubmit = async () => {
  if (!ruleFormRef.value) return;
  
  try {
    await ruleFormRef.value.validate();
    
    const response = await axios.post('/api/production_issues/', formData);
    
    if (response.status === 201) {
      ElMessage.success('新增成功');
      handleBack();
    } else {
      ElMessage.error('新增失败，请重试');
    }
  } catch (error: any) {
    console.error('提交失败:', error);
    if (error.response?.data?.detail) {
      ElMessage.error(error.response.data.detail);
    } else {
      ElMessage.error('新增失败，请检查网络或联系管理员');
    }
  }
};

// 返回上一页
const handleBack = () => {
  router.push('/production_issues');
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  margin-bottom: 30px;
}

.form-container {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>